/**
  * @description: 订单列表中的店铺模块
  * @author: yingying.fan
  * @date: 2019/2/25 17:56
  */
import React, { Component } from 'react'
import { StyleSheet, View, Image, Text } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import PropTypes from 'prop-types'
import { appThemeColor } from '../../configs/appconfig'
import OrderSkuItem from './OrderSkuItem'

export default class OrderListPage extends Component {

  static propTypes = {
    orderId: PropTypes.string.isRequired, // 订单编号
    orderState: PropTypes.string.isRequired, // 订单状态
    storeInfo: PropTypes.object.isRequired // 店铺数据
  }

  static defaultProps = {
    orderState: -4,
    orderId: '',
    storeInfo: {}
  }

  constructor (props) {
    super(props)

    // this.storeInfo = this.props.storeInfo
    this.state = {}
  }

  _getSkuItem = (skuInfo, index, storeId) => {
    return (
      <OrderSkuItem
        key={storeId + 'sku' + index}
        skuInfo={skuInfo}/>
    )
  }

  render () {
    let storeInfo = this.props.storeInfo
    let storeId = storeInfo.STORE_ID
    let storeLogo = storeInfo.STORE_LOGO
    let storeName = storeInfo.STORE_NAME
    let skuList = storeInfo.SKU_LIST
    let skuListView = []
    skuList.map((skuInfo, index) => {
      // return this._getSkuItem(skuInfo, index, storeId)
      skuListView.push(this._getSkuItem(skuInfo, index, storeId))
    })
    return (
      <View
        style={styles.storeContainer}>
        <View style={styles.storeInfoLine}>
          <Image
            source={{ uri: storeLogo }}
            style={styles.storeIcon}/>
          <Text style={styles.storeName} numberOfLines={1}>
            {storeName}
          </Text>
          <Text style={styles.orderState}>
            {this.props.orderState}
          </Text>
        </View>
        {
          skuListView
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  storeContainer: {
    width: px2dp(750)
  },
  storeInfoLine: {
    flexDirection: 'row',
    alignItems: 'center',
    height: px2dp(100),
    paddingHorizontal: px2dp(30),
    borderStyle: 'solid',
    borderBottomColor: '#dddddd',
    borderBottomWidth: px2dp(1)
  },
  storeIcon: {
    width: px2dp(40),
    height: px2dp(40)
  },
  storeName: {
    flex: 1,
    fontSize: px2dp(28),
    color: '#333333',
    paddingHorizontal: px2dp(30)
  },
  orderState: {
    fontSize: px2dp(28),
    color: appThemeColor
  }
})